var loading = document.querySelector(".loading");
var loading_timer = null;
var loading_plane = document.querySelector(".plane");
var laoding_i = 0;

var main_3 = document.querySelector(".main_3");
var main_3_Pic = main_3.children[0];

var start = document.querySelector(".start");
var start_text = document.querySelector(".start .text");
var start_timer = null;
var start_i = 0;
var btn_start = document.querySelector(".btn_start");
var btn_rule = document.querySelector(".btn_rule");
var btn_timer = null;
var btn_i = 0;

var rule = document.querySelector(".rule");
var rule_pic = rule.children[0];
var rule_div = rule.children[1];

// var game = document.querySelector(".game");
var jS_universe = document.querySelector(".universe");
// var game_mask = game.children[1];
var universe_mask = jS_universe.children[0];
// var mask_close = game_mask.children[1];
var mask_close = universe_mask.children[1];

loading_timer = setInterval(function(){
    loading_plane.setAttribute("style","bottom:"+laoding_i+"%;");
    loading_plane.children[0].innerHTML = laoding_i+"%";
    laoding_i++;
    if(laoding_i>100){
        clearInterval(loading_timer);
        loading.style.display = "none";
        main_3.style.display = "block";
        document.body.setAttribute("style","");
    }
},16)

// main_3_Pic.addEventListener("mousedown",function(e){
//     console.log(1);
//     var mouse_posTop = e.pageY;
//     document.onmousemove = function(e){
//         var mouse_posMove = e.pageY;
//         var y = mouse_posTop - mouse_posMove;
//         main_3_Pic.style.top = y+"px";
//     }
// })

main_3.addEventListener("click",function(){
    this.style.display = "none";
    document.body.setAttribute("style","background: url(images/start/bg.jpg) no-repeat top right;");
    start.style.display = "block";
    start_timer = setInterval(function(){
        start_text.style.height = start_i+"%";
        start_i++;
        if(start_i>32){
            clearInterval(start_timer);
        }
    },300)
})

// console.log(btn_rule);
// console.log(btn_start);
btn_start.addEventListener("click",function(){
    btn_i = 0;
    clearInterval(start_timer);
    btn_timer = setInterval(function(){
        btn_start.style.right = -btn_i+"%";
        btn_rule.style.right = -btn_i+"%";
        btn_i++;
        if(btn_i>48){
            clearInterval(btn_timer);
            start.style.display = "none";
            // console.log(jS_universe);
            jS_universe.style.display = "block";
            document.body.setAttribute("style","");
            mYanimate(universe_mask,{"opacity":100},50);
        }
    })
})

// mask_close.addEventListener("click",function(){
//     animate(game_mask,{"opacity":0},function(){
        
//     });
// })

btn_rule.addEventListener("click",function(){
    btn_i = 0;
    clearInterval(start_timer);
    btn_timer = setInterval(function(){
        btn_start.style.right = -btn_i+"%";
        btn_rule.style.right = -btn_i+"%";
        btn_i++;
        if(btn_i>48){
            clearInterval(btn_timer);
            start.style.display = "none";
            rule.style.display = "block";
            document.body.setAttribute("style","");
        }
    })
})

rule_div.addEventListener("click",function(){
    // console.log(1);
    start.style.display = "block";
    rule.style.display = "none";
    document.body.setAttribute("style","background: url(images/start/bg.jpg) no-repeat top right;");
    btn_start.style.right = 0;
    btn_rule.style.right = 0;
    start_timer = setInterval(function(){
        start_text.style.height = start_i+"%";
        start_i++;
        if(start_i>32){
            clearInterval(start_timer);
        }
    },300)
})




//缓动动画封装
//对传入的json做以下处理
//对opactiy进行百进制处理，防止精度丢失
//对z-index建议使用驼峰处理
function mYanimate(ele,json,time,fn){
    //要用定时器，先清定时器
    clearInterval(ele.timer);
    ele.timer = setInterval(function(){
        //开闭原则,用于清除定时器(修复bug)
        var bool = true;
        //获取初始位置,通过getComputedStyle()获取行外样式
        for(var k in json){
            //设置初始位置
            var leader;
            //对opacity的处理
            if(k == "opacity"){
                leader = mYgetStyle(ele,k)*100 || 1;
            }
            //正常处理
            else{
                leader = parseInt(mYgetStyle(ele,k)) || 0;
            }
            //生成一个步长
            var step = (json[k] - leader) / 10;
            //处理步长，步长为正向上取整，为负向下取整
            step = step>0?Math.ceil(step):Math.floor(step);
            //开始出发，初始位置加上步长
            leader += step;
            //开始赋值						
            if(k == "opacity"){
                //特殊情况特殊赋值
                ele.style[k] = leader/100;
                //兼容ie
                ele.style.filter = "alpha(opacity="+leader+")";
            }
            //层级只需直接赋值
            else if(k == "zIndex"){
                ele.style[k] = json[k];
            }
            else{
                ele.style[k] = leader + "px";
            }
            
            //如果json里面有任意一个键值对的值没有对应leader，bool不能为true
            if(json[k] !== leader){
                bool = false;
            }
        }
        //清除定时器
        if(bool){
            clearInterval(ele.timer);
            //回调
            if(fn){
                fn();
            }
        }
    },time);
}


//封装一个获取行外样式的方法
function mYgetStyle(ele,attr){
    if(window.getComputedStyle){
        //w3c标准
        return window.getComputedStyle(ele,null)[attr];
    }
    //兼容ie
    return ele.currentStyle[attr];
}